<!-- @format -->

<template>
  <comp-layout hideHeader>
    <!-- 顶部导航 -->
    <!-- 
    :showBack="true"
      bgColor="linear-gradient(135deg, #a742df 0%, #ff7eb3 100%)"
      textColor="#ffffff" -->
    <comp-header bgColor="#ffffff" title="我的服务" @getHeight="onGetHeight" />

    <!-- 标签导航 -->
    <view class="tab-nav" :style="{ top: headerHeight + 'px' }">
      <comp-tab
        v-model="activeTab"
        :tabs="tabList"
        type="line"
        @change="onTabChange"
      />
    </view>

    <!-- 占位空间 -->
    <!-- <view :style="{ height: headerHeight + 50 + 'px' }"></view> -->

    <!-- 页面内容区 -->
    <view class="content-container">
      <!-- 下拉刷新
               refresher-enabled
        :refresher-triggered="refreshing"
        @refresherrefresh="onRefresh"
         -->
      <scroll-view
        scroll-y
        @scrolltolower="onLoadMore"
        class="scroll-container"
      >
        <!-- 待接受状态板块   v-if="activeTab === 'waiting'"-->
        <view class="waiting-section">
          <view class="section-header">
            <text class="section-title">待接受的预约</text>
            <text class="selected-count">已选择 {{ selectedCount }} 项</text>
          </view>

          <!-- 待接受的预约卡片 -->
          <view
            v-for="(item, index) in waitingList"
            :key="index"
            class="service-card"
            @click="onGoDetail(item)"
          >
            <view class="card-header">
              <view class="card-header-left">
                <checkbox
                  :value="item.id"
                  :checked="selectedItems.includes(item.id)"
                  @change="onCheckboxChange"
                  class="service-checkbox"
                />
                <view class="service-info">
                  <text class="service-title">{{ item.title }}</text>
                  <view class="service-tag">
                    <text class="tag-text">{{ item.category }}</text>
                  </view>
                </view>
              </view>
              <view class="status-badge waiting">
                <text>待接受</text>
              </view>
            </view>

            <view class="card-content">
              <view class="service-details">
                <view class="detail-item">
                  <text class="detail-icon">⏰</text>
                  <text class="detail-text">{{ item.duration }}</text>
                </view>
                <view class="detail-item">
                  <text class="detail-icon">📍</text>
                  <text class="detail-text">{{ item.location }}</text>
                </view>
                <view class="detail-item">
                  <text class="detail-icon">📅</text>
                  <text class="detail-text">{{ item.date }}</text>
                </view>
                <view class="detail-item">
                  <text class="detail-icon">🕐</text>
                  <text class="detail-text">{{ item.time }}</text>
                </view>
              </view>
              <view class="service-requirement">
                <text class="requirement-text"
                  >需求：{{ item.requirement }}</text
                >
              </view>
            </view>

            <view class="card-footer">
              <text class="service-price">¥{{ item.price }}</text>
              <view class="action-buttons">
                <button class="cancel-btn" @click="cancelService(item.id)">
                  取消预约
                </button>
                <button
                  class="view-coach-btn"
                  @click="toggleCoachList(item.id)"
                >
                  查看教练
                </button>
              </view>
            </view>

            <!-- 附近教练列表 -->
            <view v-if="item.showCoaches" class="coach-list-container">
              <view class="coach-list-header">
                <text>附近教练推荐</text>
              </view>
              <view class="coach-list">
                <view
                  v-for="(coach, coachIndex) in item.coaches"
                  :key="coachIndex"
                  class="coach-item"
                >
                  <view class="coach-info">
                    <comp-image
                      :src="coach.avatar"
                      class="coach-avatar"
                      mode="aspectFill"
                    />
                    <view class="coach-details">
                      <text class="coach-name">{{ coach.name }}</text>
                      <view class="coach-meta">
                        <text class="rating-star">⭐</text>
                        <text class="rating-text"
                          >{{ coach.rating }} · {{ coach.specialty }} ·
                          {{ coach.distance }}</text
                        >
                      </view>
                    </view>
                  </view>
                  <button class="invite-btn" @click="inviteCoach(coach.id)">
                    邀请
                  </button>
                </view>
              </view>
            </view>
          </view>

          <!-- 批量邀请按钮 -->
          <view v-if="selectedCount > 0" class="batch-invite-container">
            <button class="batch-invite-btn" @click="batchInvite">
              批量邀请教练（{{ selectedCount }}）
            </button>
          </view>
        </view>

        <!-- 待服务状态卡片  v-if="activeTab === 'pending'" -->
        <view class="pending-section">
          <view
            v-for="(item, index) in pendingList"
            :key="index"
            class="service-card"
          >
            <view class="card-header">
              <view class="card-header-left">
                <comp-image
                  :src="item.coach.avatar"
                  class="coach-avatar-small"
                  mode="aspectFill"
                />
                <view class="service-info">
                  <text class="service-title">{{ item.coach.name }}</text>
                  <text class="service-subtitle">{{ item.category }}</text>
                </view>
              </view>
              <view class="status-badge pending">
                <text>待服务</text>
              </view>
            </view>

            <view class="card-content">
              <view class="service-preview">
                <comp-image
                  :src="item.image"
                  class="service-image"
                  mode="aspectFill"
                />
                <view class="service-description">
                  <text class="service-name">{{ item.title }}</text>
                  <text class="service-meta"
                    >{{ item.type }} | {{ item.duration }} |
                    {{ item.certification }}</text
                  >
                  <text class="service-datetime">{{ item.datetime }}</text>
                  <text class="service-price-large">¥{{ item.price }}</text>
                </view>
              </view>
            </view>

            <view class="card-footer">
              <button class="detail-btn" @click="viewDetail(item.id)">
                查看详情
              </button>
              <button class="contact-btn" @click="contactCoach(item.coach.id)">
                联系教练
              </button>
            </view>
          </view>
        </view>

        <!-- 已完成状态  v-if="activeTab === 'completed'"-->
        <view class="completed-section">
          <view
            v-for="(item, index) in completedList"
            :key="index"
            class="service-card"
          >
            <view class="card-header">
              <view class="card-header-left">
                <comp-image
                  :src="item.coach.avatar"
                  class="coach-avatar-small"
                  mode="aspectFill"
                />
                <view class="service-info">
                  <text class="service-title">{{ item.coach.name }}</text>
                  <text class="service-subtitle">{{ item.category }}</text>
                </view>
              </view>
              <view class="status-badge completed">
                <text>已完成</text>
              </view>
            </view>

            <view class="card-content">
              <view class="service-preview">
                <comp-image
                  :src="item.image"
                  class="service-image"
                  mode="aspectFill"
                />
                <view class="service-description">
                  <text class="service-name">{{ item.title }}</text>
                  <text class="service-meta"
                    >{{ item.type }} | {{ item.duration }} |
                    {{ item.certification }}</text
                  >
                  <text class="service-datetime">{{ item.datetime }}</text>
                  <text class="service-price-large">¥{{ item.price }}</text>
                </view>
              </view>
            </view>

            <view class="card-footer">
              <button class="detail-btn" @click="viewDetail(item.id)">
                查看详情
              </button>
              <button class="rate-btn" @click="rateService(item.id)">
                评价服务
              </button>
            </view>
          </view>
        </view>

        <!-- 已取消状态 v-if="activeTab === 'cancelled'" -->
        <view class="cancelled-section">
          <view
            v-for="(item, index) in cancelledList"
            :key="index"
            class="service-card"
          >
            <view class="card-header">
              <view class="card-header-left">
                <view class="service-info">
                  <text class="service-title">{{ item.title }}</text>
                  <text class="service-subtitle">{{ item.category }}</text>
                </view>
              </view>
              <view class="status-badge cancelled">
                <text>已取消</text>
              </view>
            </view>

            <view class="card-content">
              <text class="cancel-reason"
                >取消原因：{{ item.cancelReason }}</text
              >
              <text class="cancel-time">取消时间：{{ item.cancelTime }}</text>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view v-if="loading" class="loading-container">
          <text class="loading-text">加载中...</text>
        </view>

        <!-- 没有更多数据 -->
        <view v-if="noMore" class="no-more-container">
          <text class="no-more-text">没有更多数据了</text>
        </view>
      </scroll-view>
    </view>
  </comp-layout>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import compHeader from '@/components/comp-header/Index.vue';
  import CompTab from '@/components/comp-tab/Index.vue';

  // 响应式数据
  const headerHeight = ref(0);
  const activeTab = ref('all');
  const refreshing = ref(false);
  const loading = ref(false);
  const noMore = ref(false);
  const selectedItems = ref<string[]>([]);

  // 标签列表
  const tabList = ref([
    { name: 'all', title: '全部' },
    { name: 'waiting', title: '待接受' },
    { name: 'pending', title: '待服务' },
    { name: 'completed', title: '已完成' },
    { name: 'cancelled', title: '已取消' },
  ]);

  // 待接受列表
  const waitingList = ref([
    {
      id: '1',
      title: '拉丁舞基础课程',
      category: '舞蹈',
      duration: '60分钟 / 次',
      location: '线下场地',
      date: '6月15日 周一',
      time: '09:00-10:00',
      requirement: '希望学习基本拉丁舞步，没有任何舞蹈基础，需要教练耐心指导。',
      price: '350.00',
      showCoaches: false,
      coaches: [
        {
          id: 'c1',
          name: '王教练',
          avatar:
            'https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?q=80&w=100&auto=format&fit=crop',
          rating: '4.9',
          specialty: '拉丁舞专业',
          distance: '1.2km',
        },
        {
          id: 'c2',
          name: '李教练',
          avatar:
            'https://images.unsplash.com/photo-1566241832378-917a0f30db2c?q=80&w=100&auto=format&fit=crop',
          rating: '4.8',
          specialty: '舞蹈全能',
          distance: '2.5km',
        },
      ],
    },
    {
      id: '2',
      title: '健身私教指导',
      category: '健身',
      duration: '90分钟 / 次',
      location: '线下健身房',
      date: '6月16日 周二',
      time: '18:00-19:30',
      requirement:
        '主要想减脂增肌，有一定健身基础，需要专业教练指导练习姿势和制定计划。',
      price: '280.00',
      showCoaches: false,
      coaches: [
        {
          id: 'c3',
          name: '刘教练',
          avatar:
            'https://images.unsplash.com/photo-1594381898411-846e7d193883?q=80&w=100&auto=format&fit=crop',
          rating: '5.0',
          specialty: '健身专家',
          distance: '0.8km',
        },
      ],
    },
  ]);

  // 待服务列表
  const pendingList = ref([
    {
      id: 'p1',
      title: '哈他瑜伽私教课程',
      category: '瑜伽课程',
      type: '单次',
      duration: '60分钟',
      certification: '精准体位纠正',
      datetime: '2023-06-08 14:00',
      price: '300',
      image:
        'https://images.unsplash.com/photo-1599447421416-3414500d18a5?q=80&w=200&auto=format&fit=crop',
      coach: {
        id: 'c4',
        name: '林教练',
        avatar:
          'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=300&auto=format&fit=crop',
      },
    },
  ]);

  // 已完成列表
  const completedList = ref([
    {
      id: 'comp1',
      title: '普拉提基础课程',
      category: '普拉提',
      type: '单次',
      duration: '45分钟',
      certification: '核心训练',
      datetime: '2023-06-05 10:00',
      price: '250',
      image:
        'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=200&auto=format&fit=crop',
      coach: {
        id: 'c5',
        name: '张教练',
        avatar:
          'https://images.unsplash.com/photo-1571019613576-2b22c76fd955?q=80&w=100&auto=format&fit=crop',
      },
    },
  ]);

  // 已取消列表
  const cancelledList = ref([
    {
      id: 'cancel1',
      title: '瑜伽私教课程',
      category: '瑜伽',
      cancelReason: '时间冲突',
      cancelTime: '2023-06-07 15:30',
    },
  ]);

  // 计算属性
  const selectedCount = computed(() => selectedItems.value.length);

  // 方法
  const onGetHeight = (height: number) => {
    headerHeight.value = height;
  };

  const onTabChange = (tab: any) => {
    activeTab.value = tab.name;
    // 切换标签时重置数据
    selectedItems.value = [];
  };

  const onRefresh = () => {
    refreshing.value = true;
    // 模拟刷新数据
    setTimeout(() => {
      refreshing.value = false;
    }, 1000);
  };

  const onGoDetail = (item: any) => {
    // 跳转到详情页
    console.log('查看详情:', item);
    uni.navigateTo({
      url: '/subpackages/order/pages/order-detail/Index', //?id=' + itemId + '&type=service',
    });
  };
  const onLoadMore = () => {
    if (loading.value || noMore.value) return;
    loading.value = true;
    // 模拟加载更多数据
    setTimeout(() => {
      loading.value = false;
      // 这里可以设置 noMore.value = true 当没有更多数据时
    }, 1000);
  };

  const onCheckboxChange = (e: any) => {
    const value = e.detail.value;
    selectedItems.value = value;
  };

  const toggleCoachList = (itemId: string) => {
    const item = waitingList.value.find((item) => item.id === itemId);
    if (item) {
      item.showCoaches = !item.showCoaches;
    }
  };

  const cancelService = (itemId: string) => {
    uni.showModal({
      title: '确认取消',
      content: '确定要取消这个预约吗？',
      success: (res) => {
        if (res.confirm) {
          // 处理取消逻辑
          console.log('取消服务:', itemId);
        }
      },
    });
  };

  const inviteCoach = (coachId: string) => {
    console.log('邀请教练:', coachId);
    uni.showToast({
      title: '邀请已发送',
      icon: 'success',
    });
  };

  const batchInvite = () => {
    console.log('批量邀请:', selectedItems.value);
    uni.showToast({
      title: '批量邀请已发送',
      icon: 'success',
    });
  };

  const viewDetail = (itemId: string) => {
    console.log('查看详情:', itemId);
    // 跳转到详情页
  };

  const contactCoach = (coachId: string) => {
    console.log('联系教练:', coachId);
    // 跳转到聊天页面
  };

  const rateService = (itemId: string) => {
    console.log('评价服务:', itemId);
    // 跳转到评价页面
  };

  onMounted(() => {
    // 初始化数据
  });
</script>

<style lang="scss" scoped>
  .tab-nav {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .content-container {
    padding: 0 32rpx;
    min-height: calc(100vh - 200rpx);
  }

  .scroll-container {
    height: calc(100vh - 200rpx);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .section-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
    }

    .selected-count {
      font-size: 24rpx;
      color: #999;
    }
  }

  .service-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 32rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .card-header-left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .service-checkbox {
      margin-right: 24rpx;
    }

    .service-info {
      flex: 1;

      .service-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 8rpx;
      }

      .service-subtitle {
        font-size: 24rpx;
        color: #999;
      }
    }

    .service-tag {
      margin-top: 8rpx;

      .tag-text {
        font-size: 20rpx;
        color: #a742df;
        background: #f3e8ff;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }
    }
  }

  .status-badge {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;

    &.waiting {
      background: #f3e8ff;
      color: #a742df;
    }

    &.pending {
      background: #fff3cd;
      color: #856404;
    }

    &.completed {
      background: #d4edda;
      color: #155724;
    }

    &.cancelled {
      background: #f8d7da;
      color: #721c24;
    }
  }

  .card-content {
    padding: 32rpx;
  }

  .service-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rpx;
    margin-bottom: 24rpx;

    .detail-item {
      display: flex;
      align-items: center;
      font-size: 28rpx;

      .detail-icon {
        margin-right: 12rpx;
        font-size: 24rpx;
      }

      .detail-text {
        color: #666;
      }
    }
  }

  .service-requirement {
    .requirement-text {
      font-size: 24rpx;
      color: #999;
      line-height: 1.5;
    }
  }

  .service-preview {
    display: flex;

    .service-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 16rpx;
      margin-right: 24rpx;
    }

    .service-description {
      flex: 1;

      .service-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 8rpx;
      }

      .service-meta {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
      }

      .service-datetime {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 16rpx;
      }

      .service-price-large {
        font-size: 36rpx;
        font-weight: bold;
        color: #a742df;
      }
    }
  }

  .card-footer {
    background: #f8f9fa;
    padding: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .service-price {
      font-size: 36rpx;
      font-weight: bold;
      color: #a742df;
    }

    .action-buttons {
      display: flex;
      gap: 16rpx;
    }
  }

  .cancel-btn,
  .detail-btn {
    padding: 12rpx 32rpx;
    border: 1rpx solid #ddd;
    border-radius: 40rpx;
    background: white;
    color: #666;
    font-size: 28rpx;
  }

  .view-coach-btn,
  .contact-btn,
  .rate-btn {
    padding: 12rpx 32rpx;
    background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
    color: white;
    border-radius: 40rpx;
    font-size: 28rpx;
    border: none;
  }

  .coach-avatar-small {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }

  .coach-list-container {
    border-top: 1rpx solid #f0f0f0;

    .coach-list-header {
      padding: 24rpx 32rpx;
      background: #f8f9fa;
      border-bottom: 1rpx solid #f0f0f0;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
    }
  }

  .coach-list {
    .coach-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 32rpx;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .coach-info {
        display: flex;
        align-items: center;
        flex: 1;

        .coach-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 24rpx;
        }

        .coach-details {
          .coach-name {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 8rpx;
          }

          .coach-meta {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #999;

            .rating-star {
              color: #ffc107;
              margin-right: 8rpx;
            }
          }
        }
      }

      .invite-btn {
        padding: 8rpx 24rpx;
        border: 1rpx solid #a742df;
        color: #a742df;
        background: white;
        border-radius: 20rpx;
        font-size: 24rpx;
      }
    }
  }

  .batch-invite-container {
    position: fixed;
    bottom: 200rpx;
    left: 32rpx;
    right: 32rpx;
    z-index: 100;

    .batch-invite-btn {
      width: 100%;
      padding: 24rpx;
      background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
      color: white;
      border-radius: 16rpx;
      font-size: 32rpx;
      font-weight: 500;
      border: none;
      box-shadow: 0 8rpx 24rpx rgba(167, 66, 223, 0.3);
    }
  }

  .cancel-reason,
  .cancel-time {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
  }

  .loading-container,
  .no-more-container {
    text-align: center;
    padding: 40rpx;

    .loading-text,
    .no-more-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  .waiting-section,
  .pending-section,
  .completed-section,
  .cancelled-section {
    padding-bottom: 40rpx;
  }
</style>
